<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>约拍网管理后台</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <script type="text/javascript" th:src="@{/js/lai.common.js}"></script>
</head>
<body class="layui-anim layui-anim-up">
<div class="x-nav">
        <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">预约管理</a>
        <a>
          <cite>查看预约信息</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>


<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-form-text">
                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <select name="activeUserRole" onchange="searchOrder()" id="selectActiveType">
                                    <option value="">选择主动方类型</option>
                                    <option value="1">模特</option>
                                    <option value="2">摄影师</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" name="activeNickName" id="activeNickName" placeholder="请输入主动方用户昵称"
                                       autocomplete="off"
                                       class="layui-input" onkeyup="searchOrder()"> <!--键盘弹起就执行查找-->
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" name="activeUserPhone" id="activeUserPhone" placeholder="请输入主动方用户手机号"
                                       autocomplete="off"
                                       class="layui-input" onkeyup="searchOrder()"> <!--键盘弹起就执行查找-->
                            </div>
                            <div class="layui-input-inline">
                                <select name="invitedUserRole" onchange="searchOrder()" id="selectInvitedType">
                                    <option value="">选择受邀方类型</option>
                                    <option value="1">模特</option>
                                    <option value="2">摄影师</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" name="invitedNickName" id="invitedNickName" placeholder="请输入受邀方用户昵称"
                                       autocomplete="off"
                                       class="layui-input" onkeyup="searchOrder()"> <!--键盘弹起就执行查找-->
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" name="invitedUserPhone" id="invitedUserPhone" placeholder="请输入受邀方用户手机号"
                                       autocomplete="off"
                                       class="layui-input" onkeyup="searchOrder()"> <!--键盘弹起就执行查找-->
                            </div>

                            <div class="layui-input-inline">
                                <button class="layui-btn" onclick="searchOrder()" type="button"><i class="layui-icon">&#xe615;</i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 用户表-->
    <table class="layui-table" id="order-list" lay-filter="order-list" ></table>
</div>

<script type="text/html" id="activeUserRole">
    {{# if(d.activeUserRole==1) {}}
    <div class="layui-table-cell">模特</div>
    {{#} else if(d.activeUserRole==2){ }}
    <div class="layui-table-cell">摄影师</div>
    {{#} else {}}
    {{# }}}
</script>

<script type="text/html" id="invitedUserRole">
    {{# if(d.invitedUserRole==1) {}}
    <div class="layui-table-cell">模特</div>
    {{#} else if(d.invitedUserRole==2){ }}
    <div class="layui-table-cell">摄影师</div>
    {{#} else {}}
    {{# }}}
</script>

<script>
    var table;
    layui.use('table',function () {
        table = layui.table;
        table.render({
            elem: '#order-list'
            , url: '/yuepai/admin/order/getAgreeOrders.action'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
                groups: 5 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
            }
            , cols: [
                [
                    {field: 'activeNickName', title: '主动方昵称',width:100}
                    , {field: 'activePhone', title: '主动方手机号'}
                    , {field: 'activeUserRole', title: '主动方角色',  templet: '#activeUserRole',sort:true}
                    , {field: 'invitedNickName', title: '受邀方昵称',width:100}
                    , {field: 'invitedPhone', title: '受邀方手机号'}
                    , {field: 'invitedUserRole', title: '受邀方角色',  templet: '#invitedUserRole',sort:true}
                    , {field: 'orderAgreeTime', title: '预约开始时间'}
                    , {field: 'activity', title: '操作' ,templet: '#bar',width:230}
                ]
            ]
            , response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.status, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            }
        });

        table.on('tool(order-list)',function (obj) {
            var layEvent = obj.event;
            var data = obj.data;
        })
    });


    <!--查询动态 -->
    function searchOrder() {
        var activeUserRole  = $("#selectActiveType").val();
        var activeNickName  = $("#activeNickName").val();
        var activePhone = $("#activeUserPhone").val();
        var invitedUserRole = $("#selectInvitedType").val();
        var invitedNickName = $("#invitedNickName").val();
        var invitedPhone = $("#invitedUserPhone").val();
        table.reload('order-list',{
            page: {
                curr: 1 //重新从第 1 页开始
            }
            , where: {
                activeUserRole: activeUserRole,
                activeNickName: activeNickName,
                activePhone: activePhone,
                invitedUserRole: invitedUserRole,
                invitedNickName: invitedNickName,
                invitedPhone: invitedPhone
            }
        });
    }



    function errorFunction() {
        layer.msg("出错了,请稍后再试");
    }

    function LoadFunction() {
        layer.msg('加载中', {
            icon: 16
            ,shade: 0.01     //透明度
        });
    }
</script>



</body>
</html>